<html> <head>
<title>A Processing.js Example</title>
<script type="text/javascript" src="../../../processing.js"></script>

</head>
<body>
<table width="640"
<tr>
	<td>
	<h1 style="background: lightgreen;">A Processing.js cursor(<i>MODE</i>) Example</h1>
	<script type="application/processing">
	void setup() 
	{
		size(640, 260);
	}
	var str="default";
	void mouseMoved()
	{
		if((mouseX >=30 && mouseX<=130) && (mouseY>= 20 && mouseY<=120))
		{
			str = "hand";
		}
		else if((mouseX >=150 && mouseX<=250) && (mouseY>= 20 && mouseY<=120))
		{
			str = "all-scroll";
		}
		else if((mouseX >=270 && mouseX<=370) && (mouseY>= 20 && mouseY<=120))
		{
			str = "col-resize";
		}
		else if((mouseX >=390 && mouseX<=490) && (mouseY>= 20 && mouseY<=120))
		{
			str = "row-resize";
		}
		else if((mouseX >=510 && mouseX<=610) && (mouseY>= 20 && mouseY<=120))
		{
			str = "help";
		}
		else if((mouseX >=30 && mouseX<=130) && (mouseY>= 140 && mouseY<=220))
		{
			str = "no-drop";
		}
		else if((mouseX >=150 && mouseX<=250) && (mouseY>= 140 && mouseY<=220))
		{
			str = "pointer";
		}
		else if((mouseX >=270 && mouseX<=370) && (mouseY>= 140 && mouseY<=220))
		{
			str = "progress";
		}
		else if((mouseX >=390 && mouseX<=490) && (mouseY>= 140 && mouseY<=220))
		{
			str = "crosshair";
		}
		else if((mouseX >=510 && mouseX<=610) && (mouseY>= 140 && mouseY<=220))
		{
			str = "wait";
		}
		else
		{
			str="default";
		}
	}

	void draw() 
	{ 
		background(100);	
		PFont font = loadFont("Times New Roman");
		// Activate the font for output
		textFont(font,21);
		
		
		//FIRST REC
		rect(30, 20, 100,100);
		fill("darkgrey");
		text("Hand", 52, 80);
		
		//SEC REC
		fill("white");
		rect(150, 20, 100,100);
		fill("darkgrey");
		text("All-Scroll", 155, 80);
		
		//THIRD REC
		fill("white");
		rect(270, 20, 100,100);
		fill("darkgrey");
		text("Col-Resize", 271, 80);
		
		//FOURTH REC
		fill("white");
		rect(390, 20, 100,100);
		fill("darkgrey");
		text("Row-Resize", 390, 80);
		
		//FIFTH REC
		fill("white");
		rect(510, 20, 100,100);
		fill("darkgrey");
		text("Help", 535, 80);
		
		//SIXTH REC
		fill("white");
		rect(30, 140, 100,100);
		fill("darkgrey");
		text("No-Drop", 47, 200);
		
		//SEVENTH REC
		fill("white");
		rect(150, 140, 100,100);
		fill("darkgrey");
		text("Pointer", 165, 200);
		
		//EIGHT REC
		fill("white");
		rect(270, 140, 100,100);
		fill("darkgrey");
		text("Progress", 281, 200);
		
		//NINETH REC
		fill("white");
		rect(390, 140, 100,100);
		fill("darkgrey");
		text("Crosshair", 399, 200);
		
		//TENTH REC
		fill("white");
		rect(510, 140, 100,100);
		fill("darkgrey");
		text("Wait", 535, 200);
		
		cursor(str);
	}
	</script><canvas width="640"></canvas>
	<h3><b><i>Roll over the white rectangles to see the cursor change!</b></i></h3>
	<p>Best viewed in Firefox</p>
	<p>NOTE: not all browsers will support each <i>MODE</i> <br />
		reference <a href="http://www.quirksmode.org/css/cursor.html">CSS Cursors</a> for more details
	</p>
	</td>
</tr>
</body> </html>